<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table{
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0px;
        }
        table td{
            border: solid 1px #ccc;
            text-align: center;
            width: 200px;
            height: 30px;
        } 
        table input{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

    <label for="">姓名：</label>
    <input type="text" id="txt1">
    <label for="">年龄：</label>
    <input type="text" id="txt2">
    <label for="">电话：</label>
    <input type="text"id="txt3" >
    <label for="">QQ：</label>
    <input type="text" id="txt4">
    <input type="button" value="提交" id="btn"> 

    <table>
        <thead>
            <th>姓名</th>
            <th>年龄</th>
            <th>电话</th>
            <th>QQ</th>
            <th>操作</th>
        </thead>
        <tbody>
            <!-- <tr>
                <td>xiaoming</td>
                <td>12</td>
                <td>123445657890</td>
                <td>23435324235345</td>
                <td><input type="button" value="删除"></td>
            </tr> -->
        </tbody>
    </table>
</body>
<script>
    var btn = document.getElementById("btn")
    var tbody = document.querySelector("tbody")
    btn.onclick = function(){
        // 创建tr
        var tr = document.createElement("tr")
        // 利用字符串拼接将每次获取到的信息作为tr的内容
        tr.innerHTML = ' <td>'+txt1.value+'</td>'+
                '<td>'+txt2.value+'</td>'+
                '<td>'+txt3.value+'</td>'+
                '<td>'+txt4.value+'</td>'+
                '<td><input type="button" value="删除" class="delete"></td>'
        // 将tr插入tbody
        tbody.appendChild(tr)
        // 清空输入框内容
        txt1.value = ""
        txt2.value = ""
        txt3.value = ""
        txt4.value = ""   
        // 获取删除按钮 
        var del = document.querySelectorAll(".delete")
        del.forEach(function(val,idx){
            val.onclick = function(){
                val.parentNode.parentNode.remove()
            }
        })
        // 即时编辑
        tbody.onclick = function(e){
            // 创建input
            var newTd = document.createElement("input")
            // 获取表格上的值 赋值 给input
            newTd.value = e.target.innerHTML;
            // 清空
            e.target.innerHTML = ""

            // 将input插入点击的单元格里
            e.target.appendChild(newTd)

            // 点击单元格时input马上获取焦点
            newTd.focus()

            // 失去焦点
            newTd.onblur = function(){
                // 将input的值给单元格
                e.target.innerHTML = newTd.value
            }

        }
    }
    
    
</script>
</html>